<template>
  <div>
    <el-menu
     :default-active="$route.path"
     class="el-main-vertical-demo"
     style="width: 200px;min-height: calc(100vh - 10vh)"
     unique-opened
     router
    >
      <el-sub-menu index="income">
        <template #title>
          <el-icon><CreditCard/></el-icon>
          <span>收入管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/RevenueDetails">收入详情</el-menu-item>
        </el-menu-item-group>
        </el-sub-menu>

      <el-sub-menu index="expenditure">
        <template #title>
          <el-icon class="el-menu-item-group"><ShoppingBag/></el-icon>
          <i class="el-icon-location"></i>
          <span>支出管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/ExpenditureManagement">支出详情</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="Report">
        <template #title>
          <el-icon class="el-menu-item-group"><DataAnalysis/></el-icon>
          <i class="el-icon-location"></i>
          <span>数据报表</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="ExpenditureReport">支出数据报表</el-menu-item>
          <el-menu-item index="IncomeReport">收入数据报表</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="member">
        <template #title>
          <el-icon class="el-menu-item-group"><User/></el-icon>
          <i class="el-icon-location"></i>
          <span>家庭成员</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="FamilyMember">
            成员列表</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <el-sub-menu index="Announcement">
        <template #title>
          <el-icon class="el-menu-item-group"><bell/></el-icon>
          <i class="el-icon-location"></i>
          <span>公告管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="AnnouncementManage">
            公告管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import ShoppingBag from "@element-plus/icons/lib/ShoppingBag";
import DataAnalysis from "@element-plus/icons/lib/DataAnalysis";
import User from "@element-plus/icons/lib/User";
import List from "@element-plus/icons/lib/List";
import CreditCard from "@element-plus/icons/lib/CreditCard";
import Bell from "@element-plus/icons/lib/Bell";

export default {
  name: "Aside",
  components:{
    List,
    User,
    ShoppingBag,
    DataAnalysis,
    CreditCard,
    Bell
  }
}
</script>

<style scoped>

</style>